<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <!-- <link rel="stylesheet" href="style.css"> -->

    <style>
        ul>li {
            color: red;
        }
    </style>

<style>
    button {
        width: 200px;
        height: 200px;
        border: none;
        background-color: rgb(150, 200, 225);
        /* 文字颜色 */
        color: #000;
        border-radius: 100px;
    }

    button:active {
        background-color: #ff0;
    }
</style>

</head>

<body>
    <!-- <style>
        div {
            color: red;
            /* 设置字体大小 */
            font-size: 100px;  
        }
    </style> -->

    <!-- <div style="color: green;"> -->
    <!-- <div>
        你好 CSS！
    </div> -->

    <!-- <style>
        /* 标签选择器 */
        div {
            color: brown;
            font-size: 50px;
        }
        p {
            color: blue;
            font-size: 80px;
        }
    </style> -->

    <!-- <style>
        .one {
            color: blue;
            font-size: 30px;
        }

        #the-id {
            color: red;
            font-size: 80px;
        }
    </style>

    <div>想睡觉</div>
    <div class="one">想睡觉</div>
    <div>想睡觉</div>
    <p>不头秃</p>
    <p id="the-id">不头秃</p> -->

    <!-- <style>
        .one li {
            color: gold;
        }
        .one div {
            color: blue;
        }
    </style> -->

    
<!-- 
    <ul class="one">
        <li>小周</li>
        <li>小小周</li>
        <li>
            <div>要快乐！</div>
        </li>
        <li>要睡觉</li>
    </ul>

    <ol>
        <li>不秃头</li>
        <li>有实习</li>
    </ol>


    
    <style>
        /* 直接改变下拉框是select */
        select {
            color: aqua;
        }
        /* 改变选项中的字体是option */
        option {
            color: blue;
        }
    </style>

    <select name="" id="">
        <option value="">--start--</option>
        <option value="">王鹤棣</option>
        <option value="">蔡徐坤</option>
    </select> -->

    <!-- <style>
        /* 同时针对两个标签进行格式应用 */
        div,p {
            color: blueviolet;
            font-size: 82px;
        }
    </style>

    <div>蔡徐坤</div>
    <div>王鹤棣</div>
    <div>余庆伟</div>
    <p>大帅哥</p>
    <p>耶！</p> -->

    <!-- <style>
        div {
            font-size: 80px;
        }

        /* 鼠标放上去修改 */
        div:hover {
            color: aquamarine;
            font-size: 50px;
        }

        /* 鼠标按下去修改 */
        div:active {
            color: blue;
            font-size: 30px;
        }
    </style> -->

    <!-- <div>大颜控</div> -->

    <!-- <style>
        button {
            width: 200px;
            height: 100px;
            border: none;
            background-color: black;
            color: blanchedalmond;
        }
        /* 使用伪类选择器对按钮作出调整 */
        button:hover {
            background-color: orange;
        }
        button:active {
            background-color: beige;
            color: blue;
        }
    </style>
    <button>这是按钮！</button> -->

    <!-- <style>
        /* 其实样式修改一般放到head中 */
        div {
            /* 修改字体 */
            font-family: '楷体';
            font-size: 80px;
            font-weight: 800;
            color: rgb(80,100,50);
        }
    </style>

    <div>
        这是一段文字
    </div> -->

    
    <!-- <style>
        /* 其实样式修改一般放到head中 */
        div {
            /* 修改字体 */
            font-family: '楷体';
            font-size: 80px;
            font-weight: 800;
            color: #0000FF;
            /* 缩写  */
            color: #00F;
        }
        .parent {
            background-color: aqua;
        }
        .child {
            background-color: rgba(123,200,12,0.5);
        }
    </style> 
    <div class="parent">
        <div class="child">
            这是一段测试文字
        </div>
    </div>-->

    <!-- <style>
        /* 其实样式修改一般放到head中 */
        div {
            /* 修改字体 */
            font-family: '楷体';
            font-size: 80px;
            font-weight: 800;
            color: rgb(80,100,50);
            /* 设置居中对齐 */
            text-align: center;
            /* 设置文本装饰 */
            text-decoration: line-through;
        }
        a {
            /* 去掉下划线 */
            text-decoration: none;
        }
    </style>
    <div>
        这是一段文字
    </div>

    <a href="#">这是一个a标签，默认是带下划线的</a>

    <style>
        /* 段落缩进 */
        p {
            /* text-indent: 32px;
            font-size: 16px; */

            /* 精准缩进两个文字大小： */
            text-indent: 2em;
            font-size: 20px;
            line-height: 30px;

            /* 背景属性 */
            background-color: grey;
        }
    </style>
    <p>
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
        这是一大段话
    </p> -->

    <!-- <style>
        div {
            /* 设置属性 */
            width: 100%;
            height: 100%;
            background-image: url(img/male.png);
            /* 选择最后的一种平铺方式进行显示 */
            background-repeat: repeat-x;
            background-repeat: repeat-y;
            background-repeat: no-repeat;
            /* 设置图片显示位置 */
            background-position: bottom center;
            background-position: 80px 120px;
            /* 设置背景尺寸 */
            background-size: 100px 200px;
            background-size: contain;
            background-size: cover;
        }

        body,html {
            height: 100%;
        }
    </style> -->

    <!-- <style>
        div {
            /* 设置属性 */
            width: 100%;
            height: 100%;
            background-image: url(img/male.png);
            
            background-repeat: no-repeat;
            /* 设置图片显示位置 */
            background-position: bottom center;
            /* 设置背景尺寸 */
            background-size: contain;
        }

        body,html {
            height: 100%;
        }
    </style>

    <div>
        
    </div> -->
    
    
    <!-- <button>这是按钮</button> -->

    <!-- <style>
        a {
            display: none;
        }
    </style>
    <a href="#">一个链接</a>
    <a href="#">一个链接</a>
    <a href="#">一个链接</a>
    <a href="#">一个链接</a> -->
    
    <!-- <style>

        div {
            width: 200px;
            height: 200px;
            background-color: rgb(128, 0,0);
            /* border: 5px grey dotted;
            border: 5px grey dashed; */
            border-bottom: 5px grey solid;

            /* 设置文字居中： */
            text-align: center;
            line-height: 200px;

            /* 让边框不要撑大盒子 */
            box-sizing: border-box;

            /* 内边距 */
            padding-left: 20px;
            padding-top: 10px;
            padding: 10px 20px 30px 40px;
            padding: 20px 30px;
            padding: 10px 20px 30px;
            padding: 20px;
        }
    </style>
    <div>这是个元素</div> -->


    <!-- 弹性布局 -->

    <style>
        /* 设置相关属性，原本应该放在head中 */
        div {
            width: 100%;
            height: 150px;
            background-color: rgb(128,0,0);
            display: flex;

            /* 水平排列 */
            justify-content: center;
            justify-content: flex-start;
            justify-content: space-around;
            justify-content: space-between;

            /* 垂直排列 */
            align-items: flex-start;
            align-items: flex-end;
            align-items: center;
        }
        span {
            width: 100px;
            height: 80px;
            background-color: rgb(0, 128,0);
            display: block;
        }
    </style>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>


</body>
</html>